<template>
  <div class="app-container">
    <el-input
      v-model="filterText"
      placeholder="Filter keyword"
      style="margin-bottom: 30px"
    />
    <el-card class="box-card">
      <el-table :data="list" style="width: 100%">
        <el-table-column label="轮播图图片">
          <template #default="scope">
            <div class="demo-image__preview">
              <el-image
                style="width: 150px"
                :src="scope.row.img"
                :preview-src-list="[scope.row.img]"
                preview-teleported
              >
                <template #error>
                  <div class="image-slot">
                    <img v-error />
                  </div>
                </template>
              </el-image>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="跳转地址">
          <template #default="scope">
            <a :href="scope.row.link">{{ scope.row.link }}</a>
          </template>
        </el-table-column>
        <el-table-column prop="alt" label="轮播图alt" width="180" />
        <el-table-column label="启用/禁用">
          <template #default="scope">
            <el-switch
              :value="scope.row.status"
              :active-value="1"
              :inactive-value="0"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="large" type="primary" @click="edit(scope.row)"
              >修改</el-button
            >
            <el-button
              size="large"
              type="danger"
              @click="del(scope.row.bannerid)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-model:current-page="listQuery.page"
        v-model:page-size="listQuery.pageSize"
        :page-sizes="[1, 2, 3, 4, 5, 6]"
        :small="false"
        :disabled="false"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        width="50%"
      />
    </el-card>
    <button @click="show">++</button>
    <child ref="child" />
  </div>
</template>

<script>
import { getSwiper } from '@/api/swiper'
import Child from './Child'
export default {
  components: {
    Child
  },
  data () {
    return {
      filterText: '',
      isshow: false,
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      listQuery: {
        link: '',
        alt: '',
        page: 1,
        pageSize: 2,
        status: 1
      },
      list: [],
      total: 0,
      swiperlist: {
        link: '',
        alt: '',
        img: '',
        bannerid: '',
        status: 1
      },
      fileList: []
    }
  },
  watch: {
    filterText (val) {
      this.$refs.tree2.filter(val)
    }
  },

  methods: {
    filterNode (value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    getvalue (val) {
      console.log(val)
    },
    async getSwiperData () {
      const res = await getSwiper(this.listQuery)
      console.log(res)
      this.list = res.data.items
      this.total = res.data.total
    },
    show () {
      this.$refs.child.open()
    },
    del (e) {
      console.log(e)
    },
    edit (e) {
      this.$refs.child.swiper = { ...e }
      this.fileList = [{ url: e.img, name: e.img }]
      this.mode = 'edit'
      this.show()
      console.log({ ...e })
    },
    handleSizeChange (pageSize) {
      this.listQuery.pageSize = pageSize
      this.getSwiperData()
    },
    handleCurrentChange (page) {
      this.listQuery.page = page
      this.getSwiperData()
    }
  },
  mounted () {
    this.getSwiperData()
  }
}
</script>

<style>
.box-card {
  margin-bottom: 10px;
}
.el-form-item {
  /* width: 300px; */
  margin-top: 20px;
}
</style>
